<template>
  <div id="xsjh-list">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="70vh"
    >
      <el-table-column
        :resizable="false"
        prop="scCustomerName"
        label="客户名称"
        width="120"
        fixed
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="scId" label="编号" width="50">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="oppId"
        v-if="false"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        prop="opportunity.oppTip"
        label="机会来源"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="oppDescription"
        label="机会来源描述"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scContact"
        label="联系人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scContactNumber"
        label="联系人电话"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scPercentageOfSuccess"
        label="成功几率(%)"
        width="60"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scOutline"
        label="概要"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scCreator"
        label="创建人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scCreationTime"
        label="创建时间"
        width="100"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="scAssignToId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scAssignTo.name"
        label="指派给"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="scAssignTime"
        label="指派时间"
        width="100"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="oppStateId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="opportunityState.oppStateTip"
        label="销售机会状态"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row.oppStateId == 1001" -->
          <el-button
            :disabled="scope.row.oppStateId != 1001"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            :disabled="scope.row.oppStateId != 1001 || canZhiPai != 'SE'"
            slot="reference"
            size="mini"
            type="warning"
            @click="handleKHJL(scope.$index, scope.row)"
            >指派</el-button
          >
          <el-button
            :disabled="scope.row.oppStateId != 1001"
            slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改销售机会" :visible.sync="dialogFormVisible">
      <el-form
        label-position="right"
        label-width="110px"
        ref="formLabelAlign"
        :model="formLabelAlign"
        :rules="rules"
        ><!-- :inline="true":自动多行处理 -->
        <el-form-item label="客户名称" prop="scId" v-if="false">
          <el-input disabled v-model="formLabelAlign.scId"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="scCustomerName">
          <el-input
            placeholder="请输入客户名称"
            v-model="formLabelAlign.scCustomerName"
          ></el-input>
        </el-form-item>
        <el-form-item label="机会来源" prop="oppId">
          <el-select
            style="width: 100%"
            v-model="formLabelAlign.oppId"
            placeholder="请选择机会来源"
          >
            <el-option
              v-for="item in opp_options"
              :key="item.oppId"
              :label="item.oppTip"
              :value="item.oppId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机会来源描述" prop="oppDescription">
          <el-input
            placeholder="请输入机会来源描述"
            v-model="formLabelAlign.oppDescription"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="scContact">
          <el-input
            placeholder="请输入联系人名称"
            v-model="formLabelAlign.scContact"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="scContactNumber">
          <el-input
            placeholder="请输入联系人电话"
            v-model.number="formLabelAlign.scContactNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="成功几率" prop="scPercentageOfSuccess">
          <el-input
            style="width: 10vw"
            placeholder="0~100"
            v-model.number="formLabelAlign.scPercentageOfSuccess"
            ><template slot="append">%</template></el-input
          >
        </el-form-item>
        <el-form-item label="概要" prop="scOutline">
          <el-input
            placeholder="请输入概要"
            v-model="formLabelAlign.scOutline"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="scCreator">
          <el-input disabled v-model="formLabelAlign.scCreator"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="scCreationTime">
          <el-date-picker
            v-model="formLabelAlign.scCreationTime"
            type="datetime"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="指派给" prop="scAssignToId" v-if="false">
          <el-input disabled v-model="formLabelAlign.scAssignToId"></el-input>
        </el-form-item>
        <el-form-item label="指派时间" prop="scAssignTime">
          <el-date-picker
            v-model="formLabelAlign.scAssignTime"
            type="datetime"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="机会状态" prop="oppStateId">
          <el-select
            style="width: 100%"
            v-model="formLabelAlign.oppStateId"
            disabled
          >
            <el-option
              v-for="item in opp_state_options"
              :key="item.oppStateId"
              :label="item.oppStateTip"
              :value="item.oppStateId"
            ></el-option>
          </el-select>
        </el-form-item>

        <div style="padding-top: 10px"></div>
        <el-form-item>
          <el-button
            type="primary"
            :round="true"
            @click="submitForm('formLabelAlign')"
            style="width: 20vw"
            >修 改</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="指派客户经理"
      :visible.sync="dialogToVisible"
      width="30vw"
    >
      <el-form
        label-position="right"
        label-width="80px"
        ref="formLabelTo"
        :model="formLabelTo"
        :rules="rilesZP"
      >
        <el-form-item label="客户经理" prop="scAssignToId">
          <el-select
            v-model="formLabelTo.scAssignToId"
            placeholder="请选择客户经理"
            style="width:100%"
          >
            <el-option
              v-for="item in account_manager_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogToVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitKHJL('formLabelTo')"
          >指 派</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let checkNum1 = (rule, value, callback) => {
      let err = new Error("请输入正确的电话号码!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if ((value + "").length != 11) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    let checkNum2 = (rule, value, callback) => {
      let err = new Error("请输入0到100之间的整数!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if (value < 0 || value > 100) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    return {
      canZhiPai: this.$store.state.userPower.power,
      loading: true,
      opp_options: null,
      opp_state_options: null,
      account_manager_options: null,
      tableData: null,
      dialogFormVisible: false,
      dialogToVisible: false,
      formLabelTo: {
        id: null,
        scAssignToId: null,
      },
      formLabelAlign: {
        scId: null,
        scCustomerName: "", //客户名称
        oppId: "", //机会来源
        oppDescription: "", //机会来源的描述
        scContact: "", //联系人
        scContactNumber: "", //联系人电话
        scPercentageOfSuccess: "", //成功几率%
        scOutline: "", //概要
        scCreatorId: null, //创建人
        scCreationTime: null, //创建时间
        scAssignToId: null, //指派给
        scAssignTime: null, //指派时间
        oppStateId: null, //销售机会状态
      },
      rules: {
        scCustomerName: [
          { required: true, message: "请输入客户名称!", trigger: "change" },
        ],
        oppId: [
          { required: true, message: "请选择机会来源!", trigger: "change" },
        ],
        oppDescription: [
          { required: true, message: "请输入机会来源描述!", trigger: "change" },
        ],
        scContact: [
          { required: true, message: "请输入联系人!", trigger: "change" },
        ],
        scContactNumber: [
          { required: true, message: "电话号码不能为空!" },
          { validator: checkNum1, trigger: "change" },
        ],
        scPercentageOfSuccess: [
          { required: true, message: "成功几率不能为空!" },
          { validator: checkNum2, trigger: "change" },
        ],
        scOutline: [
          { required: true, message: "请输入概要!", trigger: "change" },
        ],
      },
      rilesZP: {
        scAssignToId: [
          { required: true, message: "请选择客户经理", trigger: "change" },
        ],
      },
    };
  },
  created: function () {
    this.$axios({
      method: "get",
      crossdomain: true,
      url: "/sale-chance/list",
    }).then((response) => {
      //   console.log(response.data.data); //请求成功返回的数据 列表信息
      this.tableData = response.data.data[0];
      this.loading = false;
    });
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/opportunity/oop",
    }).then((response) => {
      // console.log(response.data.data[0]); //请求成功返回的数据 opp信息
      this.opp_options = response.data.data[0];
    });
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/account-manager/amList",
    }).then((response) => {
      // console.log(response.data.data[0]); //请求成功返回的数据 客户经理信息
      this.account_manager_options = response.data.data[0];
    });
  },
  methods: {
    handleKHJL(index, row) {
      this.formLabelTo.row = row;
      this.dialogToVisible = true;
    },
    submitKHJL(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          let params = {
            //给后台发送数据
            amId: this.formLabelTo.scAssignToId,
          };
          this.$axios({
            method: "put",
            crossdomain: true,
            url: "/sale-chance/assign/" + this.formLabelTo.row.scId,
            params: params,
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "指派成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogToVisible = false;
              this.$axios({
                method: "post",
                crossdomain: true,
                url: "/sale-chance/toUpdate/" + this.formLabelTo.row.scId,
              }).then((response) => {
                // console.log(response.data.data[0]); //请求成功返回的数据 修改后行数据
                // this.formLabelAlign.row = response.data.data[0];
                // console.log(this.formLabelTo);
                Object.keys(this.formLabelTo.row).map(keys=>{
                  this.formLabelTo.row[keys] = response.data.data[0][keys];
                  // console.log(keys,">>",this.formLabelTo.row[keys],"->",response.data.data[0][keys]);
                });
              });
            } else {
              this.$notify({
                title: "指派失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
    handleEdit(index, row) {
      this.formLabelAlign = JSON.parse(JSON.stringify(row));
      this.formLabelAlign.row = row; // 添加原型数据方便修改
      // console.log(this.formLabelAlign); //查看转换后
      this.opp_state_options = [this.formLabelAlign.opportunityState];
      this.dialogFormVisible = true;
      // console.log("edit", index, row);
    },
    handleDelete(index, row) {
      this.$confirm(
        `此操作将永久删除条目<${row.scCustomerName}>, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios({
          method: "delete",
          crossdomain: true,
          url: "/sale-chance/del/" + row.scId,
        }).then((response) => {
          // console.log(response); //请求成功返回的数据
          if (response.data.type == "OK") {
            this.tableData.splice(index, 1);
            this.$notify({
              title: "删除成功啦",
              type: "success",
              duration: "1000", // 1000ms后关闭
              showClose: false,
            });
            // this.$router.replace({ path: "/" });
          } else {
            this.$notify({
              title: "删除失败惹",
              type: "error",
              duration: "4000", // 1000ms后关闭
              showClose: false,
            });
          }
        });
      });

      // console.log("delete", index, row);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          let params = {
            //给后台发送数据
            scId: this.formLabelAlign.scId, //id
            scCustomerName: this.formLabelAlign.scCustomerName, //客户名称
            oppId: this.formLabelAlign.oppId, //机会来源
            oppDescription: this.formLabelAlign.oppDescription, //机会来源的描述
            scContact: this.formLabelAlign.scContact, //联系人
            scContactNumber: this.formLabelAlign.scContactNumber, //联系人电话
            scPercentageOfSuccess: this.formLabelAlign.scPercentageOfSuccess, //成功几率%
            scOutline: this.formLabelAlign.scOutline, //概要
            oppStateId: this.formLabelAlign.oppStateId,// 机会状态
          };
          this.$axios({
            method: "put",
            crossdomain: true,
            url: "/sale-chance/update",
            params: params,
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "修改成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogFormVisible = false;
              this.$axios({
                method: "post",
                crossdomain: true,
                url: "/sale-chance/toUpdate/" + this.formLabelAlign.row.scId,
              }).then((response) => {
                // console.log(response.data.data[0]); //请求成功返回的数据 修改后行数据
                // this.formLabelAlign.row = response.data.data[0];
                Object.keys(this.formLabelAlign.row).map(keys=>{
                  this.formLabelAlign.row[keys] = response.data.data[0][keys];
                  // console.log(keys,">>",this.formLabelAlign.row[keys],"->",response.data.data[0][keys]);
                });
              });
            } else {
              this.$notify({
                title: "修改失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
